<!doctype html>
<html>
  <head>
    <title>Two.js: Animate Stroke</title>
    <meta charset="utf-8">
    <meta name="viewport" content="user-scalable=no">
    <link rel="image_src" href="../images/logo.gif" />
    <link rel="shortcut icon" type="image/gif" href="../images/favicon.gif">
    <script src="../third-party/url.js"></script>
    <script src="../third-party/jquery.js"></script>
    <script src="../third-party/underscore.js"></script>
    <script src="../third-party/two.js"></script>
    <style>
      body {
        background: rgb(253, 109, 109);
      }
    </style>
  </head>
  <body>
    <div class="scripts">
      <script>

        $(function() {

          var type = /(canvas|webgl)/.test(url.type) ? url.type : 'svg';
          var two = new Two({
            type: Two.Types[type],
            fullscreen: true
          }).appendTo(document.body);

          $.get('../images/fresh.svg', function(doc) {

            var fresh = two.interpret($(doc).find('svg')[0]);
            fresh.subdivide();
            fresh.noFill();
            var t = 0;
            var startOver, movingmouse = false;
            var clearT = function() {
              t = 0;
              setEnding(fresh, 0);
              startOver = _.after(60, clearT);
            };
            var stopMouse = _.debounce(function() {
              movingmouse = false;
            }, 1000);

            fresh.center().translation.set(two.width / 2, two.height / 2);
            fresh.distances = calculateDistances(fresh);
            fresh.total = 0;  fresh.stroke = 'white';
            fresh.linewidth = 40;
            _.each(fresh.distances, function(d) {
              fresh.total += d;
            });

            var rect = fresh.getBoundingClientRect();
            clearT();

            $(window)
              .bind('mousemove', mousemove)
              .bind('touchmove', function(e) {
                var touch = e.originalEvent.changedTouches[0];
                mousemove({
                  clientX: touch.pageX,
                  clientY: touch.pageY
                });
                return false;
              });

            resize();
            two
              .bind('resize', resize)
              .bind('update', function() {

                if (movingmouse) {
                  return;
                }

                if (t < 0.9999) {
                  t += 0.00625;
                } else {
                  startOver();
                }

                setEnding(fresh, t);

              }).play();

            function resize() {
              fresh.translation.set(two.width / 2, two.height / 2);
            }

            function mousemove(e) {
              movingmouse = true;
              t = cmap(e.clientX, rect.left, rect.right, 0, 1);
              setEnding(fresh, t);
              stopMouse();
            }

            function setEnding(group, t) {

              var i = 0;
              var traversed = t * group.total;
              var current = 0;

              _.each(group.children, function(child) {
                var distance = group.distances[i];
                var min = current;
                var max = current + distance;
                var pct = cmap(traversed, min, max, 0, 1);
                child.ending = pct;
                current = max;
                i++;
              });

            }

          });

        });

        function calculateDistances(group) {
          return _.map(group.children, function(child) {
            var d = 0, a;
            _.each(child.vertices, function(b, i) {
              if (i > 0) {
                d += a.distanceTo(b);
              }
              a = b;
            });
            return d;
          });
        }

        function clamp(v, min, max) {
          return Math.max(Math.min(v, max), min);
        }

        function map(v, i1, i2, o1, o2) {
          return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
        }

        function cmap(v, i1, i2, o1, o2) {
          return clamp(map(v, i1, i2, o1, o2), o1, o2);
        }

      </script>
    </div>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-40550435-1', 'github.com');
      ga('send', 'pageview');

    </script>
  </body>
</html>
